<template>
	<div class="header_common">
		<div v-if="navigation" class="content1">
			<ion-content12>
				<div class="left">
					<!--<span>
						<img class="app" src="../../static/imgs/app.png"/>
					</span>-->
					<span>
						<img class="wx" src="../../static/imgs/wx.png"/>
					</span>
					<span>
						<img class="wb" src="../../static/imgs/wb.png"/>
					</span>
					<span v-for="item in lhhq">{{item.symbol}}:{{item.lastPrice}}</span>
				</div>
				<div class="right">
					<div v-if="!isLogged">
						<span>
							<router-link to='/login'>
								登录
							</router-link>
						</span>
						<span><a class="spliter"></a></span>
						<span>
							<router-link to='/reg/phone/1'>
								注册
							</router-link>
						</span>
						<span>
							中文
							<img class="down-arrow" src="../../static/imgs/down-arrow.png">
						</span>
						<span @mouseover="nav_hover" @mouseout="nav_out">网站导航<img class="menu_icon" src="../../static/imgs/menu_icon.png"/></span>
					</div>
					<div v-else>
						<span>{{getUserName.content | encrypt('username')}}</span>
						<span><img class="clock" src="../../static/imgs/clock.png" /></span>
						<span v-on:click="logout()">退出</span>
						<span>中文
							<router-link to='/user/notice'>
								<img class="down-arrow" src="../../static/imgs/down-arrow.png">
							</router-link>
						</span>
						<span @mouseover="nav_hover" @mouseout="nav_out">网站导航<img class="menu_icon" src="../../static/imgs/menu_icon.png"/></span>
					</div>
				</div>
			</ion-content12>
			<div v-if="menu_pannel" @mouseover="nav_hover" @mouseout="nav_out" style="position: relative; width: 1200px; margin: 0 auto;">
				<div class="menu_pannel">
					<div class="column_4">
						<div class="col_title">快速交易</div>
						<div class="col_row">
							<a href="#/trading/btc/trade">BTC/CNY</a>
						</div>
						<div class="col_row">
							<a href="#/trading/zec/trade">ZEC/CNY</a>
						</div>
						<div class="col_row">
							<a href="#/trading/etc/trade">ETC/CNY</a>
						</div>
						<div class="col_row">
							<a href="#/trading/eth/trade">ETH/CNY</a>
						</div>
						<div class="col_row">
							<a target="_blank" href="http://lhang.radarwin.com/fullScreen.html">专业K线交易</a>
						</div>
					</div>
					<div class="column_4">
						<div class="col_title">
							<a href="#/money/partner" class="a_title">资产理财</a>
						</div>
						<div class="col_row">
							<a href="#/money/overview">资产总览</a>
						</div>
						<div class="col_row">
							<a href="#/money/visualization">可视化分析</a>
						</div>
						<div class="col_row">
							<a href="#/money/recharge">充值充币</a>
						</div>
						<div class="col_row">
							<a href="#/money/cashIn">提现提币</a>
						</div>
						<div class="col_row">
							<a href="#/money/partner">合伙人计划</a>
						</div>
					</div>
					<div class="column_4">
						<div class="col_title">个人中心</div>
						<div class="col_row">
							<a href="#/user/settings">安全设置</a>
						</div>
						<div class="col_row">
							<a href="#/user/securitylog">安全记录</a>
						</div>
						<div class="col_row">
							<a href="#/user/policy">安全策略</a>
						</div>
						<div class="col_row">
							<a href="#/user/auth">实名认证</a>
						</div>
						<div class="col_row">
							<a href="#/user/notice">我的消息</a>
						</div>
					</div>
					<div class="column_4">
						<div class="col_title">更多</div>
						<div class="col_row">
							<a>帮助中心</a>
						</div>
						<!--<div class="col_row">
							<a>客户端</a>
						</div>-->
						<div class="col_row">
							<a href="http://blog.lhang.com/" target="_blank">最新资讯</a>
						</div>
						<div class="col_row">
							<a target="_blank" href="http://lhang.radarwin.com/givebtc/givebtc.html">最新活动</a>
						</div>
						<div class="col_row">
							<a>API文档</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="navigation" class="content2">
			<ion-content12>
				<div class="left">
					<router-link to='/'>
						<img class="logo" src="../../static/imgs/logo.png" />
					</router-link>
					<span :class="{ 'active': isPath === '/' }">
					<router-link to='/'>
						首页
					</router-link>
				</span>
					<span @mouseover="nav_hover2" @mouseout="nav_out2" :class="{ 'active': (isTrading || menu_pannel2)}">
						<router-link to='/trading/btc/trade'>
					快速交易
					</router-link>
					<ul class="subnav" @mouseover="nav_hover2" @mouseout="nav_out2" v-if="menu_pannel2">
						<li>
							<router-link to='/trading/btc/trade'>
								BTC现货交易
							</router-link>
						</li>
						<li>
							<router-link to='/trading/zec/trade'>
								ZEC现货交易
							</router-link>
						</li>
						<li>
							<router-link to='/trading/etc/trade'>
								ETC现货交易
							</router-link>
						</li>
						<li>
							<router-link to='/trading/eth/trade'>
								ETH现货交易
							</router-link>
						</li>
					</ul>
				</span>
					<span>
					<a target="_blank" href="http://lhang.radarwin.com/fullScreen.html">专业交易</a>
				</span>
					<span>
						<a target="_blank" href="http://lhang.radarwin.com/givebtc/givebtc.html">最新活动</a>
				</span>
					<span>
						<a href="http://blog.lhang.com/" target="_blank">最新资讯</a>
				</span>
				</div>
				<div class="right">
					<div v-if="!isLogged">
						<span>
							<router-link to='/reg/phone/1'>
								注册
							</router-link>
						</span>
						<span>
							<router-link to='/login'>
								登录
							</router-link>
						</span>
					</div>
					<div v-if="isLogged">
						<span @mouseover="nav_hover3" @mouseout="nav_out3">{{getUserName.content | encrypt('username')}}</span>
						<span v-on:click="logout()">退出</span>
						<ul class="subnav" @mouseover="nav_hover3" @mouseout="nav_out3" v-if="menu_pannel3">
							<div class="name">{{"向俊峰" | encrypt('username')}}</div>
							<div class="information">
								<img src="../../static/imgs/icon_c1_on.png" />
								<img src="../../static/imgs/icon_c1_on.png" />
								<img src="../../static/imgs/icon_c1_on.png" />
								<img src="../../static/imgs/icon_c1_on.png" />
								<img src="../../static/imgs/icon_c1_on.png" />
							</div>
							<div class="assets">
								<label class="assets_left">总资产</label>0.00<label class="assets_right">CNY</label>
							</div>
							<div class="integral"><label class="integral_left">总积分</label>2342<img class="integral_right" src="../../static/imgs/V1.png" /></div>
							<div class="table">
								<span class="title">币种</span>
								<span class="title">可用</span>
								<span class="title">冻结</span>
								<span class="title">小计</span>
							</div>
							<div class="list">
								<span>CNY</span>
								<span>2134</span>
								<span>21342</span>
								<span>2134</span>
							</div>
							<div class="list">
								<span>BTC</span>
								<span>3124</span>
								<span>31241</span>
								<span>12341234</span>
							</div>
							<div class="list">
								<span>ZEC</span>
								<span>321412</span>
								<span>123412</span>
								<span>1234</span>
							</div>
							<div class="list">
								<span>ETH</span>
								<span>1324</span>
								<span>12341</span>
								<span>12342</span>
							</div>
							<div class="list">
								<span>ETC</span>
								<span>3242</span>
								<span>234</span>
								<span>2342</span>
							</div>
							<div class="button">
								<button>充值</button>
								<button>提现</button>
							</div>
						</ul>
					</div>
				</div>
			</ion-content12>
		</div>

		<div v-if="!navigation" class="content3">
			<ion-content12>
				<div class="left">
					<router-link to='/'>
						<img class="logo" src="../../static/imgs/logo.png" />
					</router-link>
				</div>
				<div class="right">
					<span class="content3_title">{{navigation_title}}</span>
					<span class="content3_home">
						<div class="right"> 
							<span>中文</span>
					<span>
								<router-link to='/'>
									返回首页
								</router-link>
							</span>
				</div>
				</span>
		</div>
		</ion-content12>
	</div>
	</div>
</template>

<script>
	import store from '../vuex/store'
	//	import menuPannel from './pannel/menu_pannel'
	export default {
		name: 'header',
		data() {
			return {
				content: "宝宝是链行动态",
				news: [],
				menu_pannel_tag: false,
				menu_pannel: false,
				menu_pannel_tag2: false,
				menu_pannel2: false,
				menu_pannel_tag3: false,
				menu_pannel3: false,
				navigation: true,
				navigation_title: '',
				lhhq: [{
					symbol: 'BTC/CNY',
					lastPrice: '--.--'
				}, {
					symbol: 'ZEC/CNY',
					lastPrice: '--.--'
				}, {
					symbol: 'ETC/CNY',
					lastPrice: '--.--'
				}, {
					symbol: 'ETH/CNY',
					lastPrice: '--.--'
				}],
				lhhq_type: 'BTC/CNYZEC/CNYETC/CNYETH/CNY',
			}
		},
		computed: {
			isLogged() {
				return this.$store.getters.isLogged;
			},
			getUser() {
				return this.$store.getters.getUser;
			},
			getUserName() {
				return this.$store.getters.userName;
			},
			isTrading() {
				return this.$route.path.indexOf("trading") > 0 ? true : false;
			},
			isPath() {
				return this.$route.path;
			},
			socket() {
				return this.$store.getters.multi_platform;
			}
		},
		components: {
			//			menuPannel,
		}, //这里注册
		methods: {},
		mounted() {
			var that = this;
			this.get_navigation();
		},
		methods: {
			nav_hover: function() {
				this.menu_pannel = true,
					this.menu_pannel_tag = false;
			},
			nav_out: function() {
				let that = this;
				this.menu_pannel_tag = true;
				setTimeout(function() {
					if(that.menu_pannel_tag) {
						that.menu_pannel = false;
					}
				}, 100)
			},
			////////
			nav_hover2: function() {
				this.menu_pannel2 = true,
					this.menu_pannel_tag2 = false;
			},
			nav_out2: function() {
				let that = this;
				this.menu_pannel_tag2 = true;
				setTimeout(function() {
					if(that.menu_pannel_tag2) {
						that.menu_pannel2 = false;
					}
				}, 100)
			},
			//////
			nav_hover3: function() {
				this.menu_pannel3 = true,
					this.menu_pannel_tag3 = false;
			},
			nav_out3: function() {
				let that = this;
				this.menu_pannel_tag3 = true;
				setTimeout(function() {
					if(that.menu_pannel_tag3) {
						that.menu_pannel3 = false;
					}
				}, 100)
			},
			logout: function() {
				store.dispatch('logout')
			},
			///////
			get_navigation() {
				var path = this.$route.path.split('/')[1]
				switch(path) {
					case 'reg':
						this.navigation_title = '用户注册'
						this.navigation = false
						break;
					case 'setpassword':
						this.navigation_title = '用户注册'
						this.navigation = false
						break;
					case 'findpassword':
						this.navigation_title = '找回密码'
						this.navigation = false
						break;
					case 'login':
						this.navigation_title = '用户登录'
						this.navigation = false
						break;
					default:
						this.navigation = true
						break;
				}
			}
		},
		watch: {
			'$route' (to, from) {
				console.log(2222)
					// 对路由变化作出响应...
				this.get_navigation();
			},
			socket: function(res) {
				var that = this;
				if(res.channel == 'multi_platform_lhang_tickers') {
					if(this.lhhq_type.indexOf(res.data.symbol) >= 0) {
						for(var i in that.lhhq) {
							if(this.lhhq[i].symbol == res.data.symbol) {
								if(res.data.lastPrice) {
									this.lhhq[i].lastPrice = res.data.lastPrice;
								}
							}
						}
					} else {
						that.lhhq.push(res.data)
						that.lhhq_type += res.data.symbol;
					}
				}
			}
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.header_common {
		width: 100%;
		/*position: relative;*/
		/*z-index: 1;*/
		z-index: 10;
		.content1 {
			height: 42px;
			background: #283138;
			color: white;
			/*position: relative;*/
			z-index: 99;
			.left {
				float: left;
				font-size: 12px;
				height: 100%;
				span {
					height: 100%;
					display: table;
					float: left;
					line-height: 42px;
					margin-right: 20px;
					.app {
						width: 19px;
						height: 23px;
						top: 6px;
						position: relative;
					}
					.wx {
						width: 27px;
						height: 23px;
						top: 7px;
						position: relative;
					}
					.wb {
						width: 27px;
						height: 27px;
						top: 8px;
						position: relative;
					}
				}
			}
			.right {
				float: right;
				font-size: 14px;
				height: 100%;
				a {
					color: white;
				}
				span {
					height: 100%;
					display: table;
					float: left;
					line-height: 42px;
					margin-left: 10px;
					cursor: pointer;
				}
				.menu_icon {
					height: 11px;
					width: 11px;
				}
				.spliter {
					width: 1px;
					background-color: #fff;
					height: 10px;
					display: inline-block;
				}
				.down-arrow {
					height: 7px;
					width: 11px;
				}
				.clock {
					height: 20px;
					width: 20px;
					margin-top: 11px;
				}
			}
		}
		.content2 {
			height: 70px;
			background: white;
			/*position: relative;*/
			z-index: 0;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .11);
			a {
				color: black;
				display: block;
				float: left;
			}
			.left {
				float: left;
				height: 100%;
				.logo {
					float: left;
					width: 130px;
					height: 70px;
					padding: 10px 0;
					margin-right: 60px;
				}
				span {
					height: 70px;
					display: table;
					float: left;
					line-height: 70px;
					margin-right: 30px;
					width: 100px;
					position: relative;
					a {
						width: 100%;
						height: 100%;
						text-align: center;
					}
					.subnav {
						display: block;
						z-index: 2;
						background: #0093f1;
						position: absolute;
						width: 100px;
						box-shadow: 0 2px 4px 0 rgba(0, 147, 241, .11);
						font-size: 14px;
						top: 70px;
						li {
							height: 30px;
							line-height: 30px;
							a {
								color: #fff!important;
								position: relative;
							}
						}
						li:hover {
							background: white;
							a {
								color: #0093f1!important;
								position: relative;
							}
						}
					}
				}
				span:hover {
					a {
						color: #0093f1 !important;
					}
					display: table-caption;
					color: #0093f1 !important;
					border-bottom: 4px solid #0093f1 !important;
				}
				.active {
					a {
						color: #0093f1 !important;
					}
					display: table-caption;
					color: #0093f1 !important;
					border-bottom: 4px solid #0093f1 !important;
				}
			}
			.right {
				float: right;
				height: 100%;
				width: 360px;
				text-align: right;
				span {
					height: 100%;
					display: table;
					float: right;
					line-height: 70px;
					margin-left: 10px;
					cursor: pointer;
				}
				.subnav {
					padding: 20px 30px;
					display: block;
					z-index: 10;
					background: white;
					top: 65px;
					right: 115px;
					position: relative;
					width: 475px;
					height: 496px;
					box-shadow: 4px 6px 21px 5px rgba(151, 151, 151, 0.7);
					font-size: 14px;
					border-radius: 2px;
					color: #1b1e23;
					div {
						overflow: auto;
					}
					.name {
						text-align: right;
						color: #0093f1;
					}
					.information {
						text-align: left;
						img {
							height: 24px;
							width: 24px;
							margin-right: 10px;
						}
					}
					.assets {
						text-align: left;
						font-size: 30px;
						color: #0093f1;
						.assets_left {
							font-size: 14px;
							color: #1b1e23;
							margin-right: 10px;
						}
						.assets_right {
							font-size: 14px;
							margin-left: 10px;
						}
					}
					.integral {
						text-align: left;
						.integral_left {
							font-size: 14px;
							margin-right: 10px;
						}
						.integral_right {
							margin-left: 10px;
							height: 11px;
						}
					}
					.table {
						span {
							height: 40px !important;
							line-height: 40px !important;
							margin: 0px;
						}
						.title {
							border-bottom: 2px solid #0093f1;
							margin-right: 14px;
							padding: 0px 40px;
						}
						.title:nth-child(1) {
							padding: 0px 10px;
						}
						.title:nth-child(4) {
							margin-right: 0px;
						}
					}
				}
				.subnav>div>span {
					height: 50px;
					line-height: 50px;
					margin: 0px;
					overflow: auto;
					width: 108px;
					margin-right: 14px;
				}
				.subnav>div>span:nth-child(1) {
					width: 48px;
				}
				.subnav>div>span:nth-child(4) {
					margin-right: 0px;
				}
				.button {
					padding: 20px 0;
					button {
						width: 175px;
						height: 40px;
						margin: 0 10px;
						background: #0093f1;
						color: white;
						font-size: 14px;
					}
				}
				.list:hover {
					background: #F2F9FE;
				}
			}
		}
		.content3 {
			height: 70px;
			background: white;
			/*position: relative;*/
			z-index: 0;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .11);
			a {
				color: black;
				display: block;
			}
			.left {
				float: left;
				height: 100%;
				.logo {
					float: left;
					width: 130px;
					height: 70px;
					padding: 10px 0;
					margin-right: 60px;
				}
				span {
					height: 70px;
					display: table;
					float: left;
					line-height: 70px;
					margin-right: 30px;
					width: 100px;
				}
			}
			.right {
				height: 100%;
				margin-left: 220px;
				.content3_title {
					float: left;
					height: 40px;
					line-height: 40px;
					border-left: solid 1px #c1c1c1;
					margin: 15px 0;
					position: relative;
					padding-left: 20px;
				}
				.content3_home {
					.right {
						font-size: 14px;
						float: right;
						span {
							float: left;
							line-height: 70px;
						}
						span:nth-child(1) {
							margin-right: 15px;
						}
						span:nth-child(2) {
							margin-left: 15px;
							border-left: solid 1px #1b1e23;
							height: 20px;
							margin: 25px 0;
							line-height: 21px;
							padding-left: 15px;
						}
					}
				}
			}
		}
		.menu_pannel {
			width: 678px;
			height: 226px;
			background: red;
			/*position: relative;
			left: 875px;*/
			position: absolute;
			right: 0;
			z-index: 10;
			text-align: left;
			background: #283138;
			margin-top: -1px;
			.column_4 {
				width: 25%;
				float: left;
				padding: 0 40px;
				.col_title {
					font-size: 18px;
					border-bottom: 1px white solid;
					padding: 4px 0px;
					margin-bottom: 10px;
					.a_title {
						font-size: 18px;
					}
				}
				a {
					color: white;
					cursor: pointer;
					font-size: 14px;
				}
				.col_row {
					padding: 4px 0;
				}
			}
		}
	}
</style>